<template>
  <el-container style="height: 100%">
    <el-header class="adminViewHeader">
      <div style="font-weight:bold;font-size: 25px;color: #2b73af;">管理员界面-帖子管理</div>
      <div class="header-right">
        <el-input v-model="searchValue" placeholder="请输入搜索关键字" class="input"></el-input>
        <el-button type="primary" @click="goToSearchPage" class="selectBtn">搜索</el-button>
      </div>

      <div class="header-left">
        <el-button @click="goToPostPage" style="margin-right: 20px;">发帖</el-button>
        <el-dropdown trigger="click" class="dropdown">
          <el-avatar style="margin-top: 25px; background-color: RGB(64,158,255);"> {{ userName }} </el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-button-text @click="goToUserInformation">我的空间</el-button-text>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-button-text @click="goToChargeUser">用户管理</el-button-text>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-button-text @click="goToLogin">登出</el-button-text>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

    </el-header>



    <el-container style="height: 100vh;">
      <el-aside width="200px" style="height: 100%; background-color: #f7f7f7">
        <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#f7f7f7" text-color="#000000"
          active-text-color="#2775b6">
          <el-menu-item>
            <span style="font-weight:bold;font-size: 20px;">whx论坛系统</span>
          </el-menu-item>

          <el-menu-item @click="showAllArticles()">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">所有帖子</span>
          </el-menu-item>

          <el-submenu>
            <template slot="title">
              <i class="el-icon-notebook-1"></i>
              <span slot="title" style="font-weight:bold;font-size: 18px;">分类</span>
            </template>
            <el-menu-item v-for="(module, index) in modules" :key="module.moduleId" :index="index + 2"
              @click="handleMenuItemClick(module.moduleName)">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">{{ module.moduleName }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>


      <el-main>
        <el-table v-loading="loading" :data="articles">
          <el-table-column prop="module" label="类别" width="140">
            <template slot-scope="scope">
              {{ modules[scope.row.module].moduleName }}
            </template>
          </el-table-column>

          <el-table-column prop="poster" label="作者" width="120">
            <template slot-scope="scope">
              {{ users[scope.row.poster].userName }}
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="100"></el-table-column>
          <el-table-column prop="content" label="帖子">
            <template slot-scope="scope">
              <div class="table-cell-content">{{ scope.row.content }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="postTime" label="发布时间" width="100"></el-table-column>
          <el-table-column width="80">
            <template slot-scope="scope">
              <el-button @click="goToshowPost(scope.row.postId)" type="primary" plain>查看</el-button>
            </template>
          </el-table-column>
          <el-table-column width="80">
            <template slot-scope="scope">
              <el-button @click="deletePost(scope.row.postId)" type="danger" plain>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      articles: [],
      allarticles: [],
      loading: true
    }
  }, async created() {
    this.userId = this.$route.params.userId;
    this.userName = this.$route.params.userName;
    await this.$axios.get('https://localhost:44300/api/User/getallUser')
      .then(response => {
        const users = response.data.response;
        this.users = {};
        users.forEach(user => {
          this.users[user.userId] = user;
        });
        this.$forceUpdate();
      })
      .catch(error => {
        console.error(error);
      });

    await this.$axios.get('https://localhost:44300/api/Module/getAll')
      .then(response => {
        const modules = response.data.response;
        this.modules = {};
        modules.forEach(module => {
          this.modules[module.moduleId] = module;
        });
        this.$forceUpdate();
      })
      .catch(error => {
        console.error(error);
      });

    await this.$axios.get('https://localhost:44300/api/Post/getAll')
      .then(response => {
        this.allarticles = this.articles = response.data.response;
        this.$forceUpdate();
        this.loading = false
      })
      .catch(error => {
        console.error(error);
      });

  },
  methods: {
    deletePost(postId) {
      this.$confirm('此操作将永久删除该帖子, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get('https://localhost:44300/api/Post/DeleteArticle', {
          params: {
            id: postId
          }
        })
          .then(response => {
            if (response.data.success === true) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.loadData();
            } else {
              this.$message({
                message: response.data.msg,
                type: 'error'
              });
            }
          })
          .catch(error => {
            console.error(error);
          });
      }).catch(() => {
        // 取消删除，不执行任何操作
      });
    },
    goToSearchPageAdmin() {
      this.$router.push("/SearchPageAdmin");
    },
    goToSearchPage() {
      if (this.searchValue.trim() === '') {
        // 如果搜索框为空则不跳转到搜索页面
        return;
      }
      this.$router.push({ name: 'searchPage', params: { value: this.searchValue, backPage: 'adminMain', userId: this.userId, userName: this.userName } })
      // 根据 this.searchValue 进行搜索
    },
    goToLogin() {
      this.$router.push("/login");
    },
    goToshowPost(postId) {
      this.$router.push({ name: 'showPost', params: { postId: postId, userId: this.userId, userName: this.userName, backPage: 'adminMain' } });
    }, goToUserInformation() {
      this.$router.push({ name: 'userInformation', params: { userId: this.userId, userName: this.userName, backPage: 'adminMain' } })
    }, goToChargeUser() {
      this.$router.push({ name: 'adminChargeUser', params: { userId: this.userId, userName: this.userName } })
    },
    goToPostPage() {
      this.$router.push({ name: 'postPage', params: { userId: this.userId, userName: this.userName, backPage: 'adminMain' } })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => { });
    }, handleMenuItemClick(module) {
      this.loading = true;
      this.$axios.get('https://localhost:44300/api/Post/ModuleSelect', {
        params: {
          moduleName: module
        }
      }).then(response => {
        this.articles = response.data.response;
        this.loading = false;
      })
        .catch(error => {
          console.error(error);
        });
    }, showAllArticles() {
      this.articles = this.allarticles;
    }, loadData() {
      this.$axios.get('https://localhost:44300/api/Post/getAll')
        .then(response => {
          this.allarticles = this.articles = response.data.response;
          this.$forceUpdate();
        })
        .catch(error => {
          console.error(error);
        });
    }

  },
};
</script>

<style scoped>
.adminViewHeader {
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f7f7;
  box-shadow: 0 0 5px #f7f7f7;
}

.header-left {
  display: flex;
  align-items: center;

}

.header-right {
  display: flex;
  align-items: center;
  margin: auto;
}

.dropdown {
  margin-right: 20px;
}

.input {
  width: 350px;
  margin-right: 10px;
}

.selectBtn {
  width: 100px;
}

.post-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.post-card {
  width: 80%;
  margin-bottom: 16px;
  cursor: pointer;
}

.post-title {
  font-size: 24px;
  margin-bottom: 8px;
}

.post-info {
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
}

.post-category {
  margin-right: 8px;
}

.post-summary {
  font-size: 16px;
  line-height: 1.5;
}

.table-cell-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
